<template>
  <div class="menu-box" :class="{hideSidebar:isCollapse}">
    <div class="menu-btn" @click="changeMenuState">
      <i :class="isCollapse ? 'el-icon-d-arrow-right' : 'el-icon-d-arrow-left'"></i>
    </div>
    <scroll-bar>
      <el-menu
        :default-active="$route.path"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        :collapse="isCollapse"
        :unique-opened="true"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        router
      >
        <div :key="index" v-for="(oneLevel,index) in systemMenus">
          <!-- 首页菜单 -->
          <el-menu-item v-if=" index == 0 " :index="'/main/'+$route.params.productCode">
            <span class="icon-home icon-menu"></span>
            <span slot="title">首页</span>
          </el-menu-item>
          <!-- 有子菜单   -->
          <el-submenu v-if="oneLevel.children" :index="'/main/'+$route.params.productCode+index.toString()" :key="index">
            <template slot="title">
              <span :class="[oneLevel.iconCls, currentMenuIndex == index ? 'icon-quality-active' : 'icon-quality']" class="icon-menu"></span>
              <span slot="title">{{oneLevel.name}}</span>
            </template>
            <div v-for="(twoLevel,twoLevelIndex) in oneLevel.children" :key="twoLevelIndex">
              <el-submenu v-if="twoLevel.children" :key="twoLevel.path.toString()" :index="'/main/'+$route.params.productCode+twoLevel.path.toString()">
                <span slot="title">{{twoLevel.name}}</span>
                <!-- <el-menu-item v-if="!thirdLevel.children" :key="thirdLevel.path.toString()" :index="thirdLevel.path.toString()" v-for="thirdLevel in twoLevel.children">{{thirdLevel.name}}</el-menu-item> -->
              </el-submenu>
              <el-menu-item v-else :key="twoLevel.path.toString()" :index="'/main/'+$route.params.productCode+twoLevel.path.toString()">
                <span slot="title">{{twoLevel.name}}</span>
              </el-menu-item>
            </div>
          </el-submenu>
          <!-- 没有子菜单 -->
          <el-menu-item v-if="!oneLevel.children" :index="'/main/'+$route.params.productCode+oneLevel.path.toString()" :key="index">
            <span class="icon-menu" :class="[oneLevel.iconCls]"></span>
            <span slot="title">{{oneLevel.name}}</span>
          </el-menu-item>
        </div>
      </el-menu>
    </scroll-bar>
  </div>
</template>
<script>

import { mapGetters, mapActions } from "vuex";
import ScrollBar from "./ScrollBar";
export default {
  data() {
    return {
      currentMenuIndex:""
    };
  },
  components: { ScrollBar },
  computed: {
    ...mapGetters(["isCollapse"])
  },
  props: [
    "systemMenus"
  ],
  created() {
    
  },
  methods: {
    ...mapActions(["getSystemAllMenu", "changeCollapse"]),
    handleOpen(key, keyPath) {
      // 更新当前菜单下标
      //this.updateMenuIndex(key);
      if (key === -1) {
        this.$refs.menu.close();
      }
    },
    handleClose(key, keyPath) {
      //this.updateMenuIndex(-2);
    },
    changeMenuState() {
      this.changeCollapse(this.isCollapse);
    }
  }
};
</script>
<style lang='scss'>
@import "../../styles/variables.scss";
.menu-box {
  background: #000;
  align-items: stretch;
  overflow: hidden;
  width: 225px; //   .el-menu-vertical-demo:not(.el-menu--collapse) {
  //     width: 200px;
  //   }
  .menu-btn {
    width: 65px;
    color: #fff;
    font-size: 10px;
    cursor: pointer;
    padding: 8px;
    & > i:hover {
      background-color: $new-blue;
    }
  }
}

.el-menu.el-menu-vertical-demo.el-menu--dark.el-menu--collapse
  > div
  > .el-submenu
  > .el-submenu__title
  > span,
.el-menu.el-menu-vertical-demo.el-menu--dark.el-menu--collapse
  > div
  > .el-submenu
  > .el-submenu__title
  > .el-submenu__icon-arrow.el-icon-caret-right {
  display: none !important;
}
.el-menu-item {
  padding-right: 20px !important;
  span {
    display: inline-block;
    line-height: initial;
    word-break: break-all;
    word-wrap: break-word;
    white-space: pre-wrap;
  }
}
//左侧鼠标事件出来的弹窗 背景色
.el-menu--vertical {
  .el-menu.el-menu--popup.el-menu--popup-right-start {
    background-color: #2d3856 !important;
  }
}

// 左侧菜单整体背景颜色
.el-menu .el-submenu__title,
.el-menu .el-menu-item {
  color: #808080 !important;
  background-color: #000 !important;
}
// 子菜单背景颜色
.el-menu .el-menu--inline .el-menu-item,
.el-menu .is-opened > .el-submenu__title,
.el-menu--vertical .el-menu .el-menu-item {
  background-color: #000 !important;
}
// 展开的子菜单第一级字体颜色
.el-menu .is-opened > div.el-submenu__title {
  color: #fff !important;
}
// 当前菜单背景样色
.el-menu .el-menu-item.is-active,
.el-menu .el-menu--inline .el-menu-item.is-active {
  // background-color: $activeSubMenuBg !important;
  color: #fff !important;
}

.icon-menu {
  width: 20px;
  height: 20px;
  display: inline-block;
  margin-right: 8px;
  background-size: contain !important;
}
.icon-product-setup{
  background: url(../../static/imgs/product_set.png);

}
.icon-product-router{
  background: url(../../static/imgs/routers.png);

}
.icon-home{
  background: url(../../static/imgs/home.png);

}
.icon-handler{
  background: url(../../static/imgs/handler.png);

}
.icon-zookeeper{
  background: url(../../static/imgs/zookeeper.png);

}
.el-menu-vertical-demo {
  .el-icon-date:before {
    display: none;
  }
  .el-submenu.is-opened {
    .icon-product-setup{
      background: url(../../static/imgs/product_set_active.png);
    }
    .icon-product-router{
      background: url(../../static/imgs/routers_active.png);
    }
    .icon-home{
      background: url(../../static/imgs/home_active.png);
    }
    .icon-handler{
      background: url(../../static/imgs/handler_active.png);
    }
    .icon-zookeeper{
      background: url(../../static/imgs/zookeeper_active.png);
    }
  }
  .el-menu-item.is-active{
    .icon-zookeeper{
      background: url(../../static/imgs/zookeeper_active.png);
    }
    .icon-home{
      background: url(../../static/imgs/home_active.png);
    }
  }
}

</style>    